<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户订单详情</title>
    <!-- 引入Element UI样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- 引入Vue和Element UI的JS文件 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <!-- 引入axios -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <!-- 引入本地js -->
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
    <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />

</head>
<body>
    <div id="app">
        <lx-header slot="header" v-on:toggle="isToggle = !isToggle"></lx-header>
        <div class="app-containers main-content">
            <div class="container main-content">
                <div class="content">
                    <h1 class="module-title">基本信息</h1>
                    <div class="center-grid mb-20">
                        <el-form ref="form" :model="form" size="mini">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="订单编号：">{{ form.cuoCode }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="订单总价（元）：">{{ form.cuoAmount }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="折扣：">{{ form.cuoRate }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="税费（元）：">{{ form.taxAmount }}</el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="订单状态：">
                                        {{ getOptionsStr('so_status',form.status) }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="责任单位：">{{ form.responsibilityDept }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="预计交付时间：">{{ form.expectedTime }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="订单跟踪：">
                                        {{ getOptionsStr('so_progress',form.cuoProgress) }}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="创建人：">{{ form.createBy }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <h1 class="module-title">用户信息</h1>
                    <div class="center-grid mb-20">
                        <el-form ref="form" :model="form" size="mini">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="用户姓名：">{{ form.userName }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="手机号码：">{{ form.phoneNum }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="出生日期：">{{ form.birthday }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="用户地址：">{{ form.address }}</el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="电子邮箱：">{{ form.mail }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="职业：">{{ form.career }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="驾驶证信息：">{{ form.driverCar }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="驾驶经验：">{{ form.driverYear }}</el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <h1 class="module-title">车辆信息</h1>
                    <div class="center-grid mb-20">
                        <el-form ref="form" :model="rowDetail" label-width="100px">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="车型号：">{{ form.carModelName }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="车平台：">{{ form.carPlatformName }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="数量：">1</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="单价：">{{ form.orderPrice }}</el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>

                    <h1 class="module-title">选配信息</h1>
                    <div class="center-grid mb-20">
                        <div v-for="configItem in configOptions" :key="bigConfigCode" style="margin-bottom: 20px">
                            <div class="main-category-title">{{configItem.bigConfigName}}</div>
                            <el-table :data="configItem.smallConfigList" stripe border>
                                <el-table-column prop="smallConfigName" width="400" label="选配项目"></el-table-column>
                                <el-table-column label="选配内容">
                                    <template #default="{ row }">
                                        <div v-if="row.configType === '0'">
                                            <span>{{row.configText}}</span>
                                        </div>
                                        <div v-if="row.configType !== '0'">
                                            <span>{{row.optionValue}}</span>
                                        </div>
                                        <!--<div v-if="row.configType === '1'">
                                            <el-radio-group v-model="row.selectedValue">
                                                <el-radio v-for="(option, index) in row.optionList" :key="index" :label="option.optionCode">{{ option.optionName }}</el-radio>
                                            </el-radio-group>
                                        </div>
                                        <div v-if="row.configType === '2'">
                                            <el-checkbox-group v-model="row.selectedValues">
                                                <el-checkbox v-for="(option, index) in row.optionList" :key="index" :label="option.optionCode">{{ option.optionName }}</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                        <div v-if="row.configType === '0'">
                                            <span>{{row.configText}}</span>
                                        </div>-->
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <div style="height:20px;"></div>

                    <h1 class="module-title">交付信息</h1>
                    <div class="center-grid mb-20">
                        <el-form ref="form" :model="form" size="mini">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="交车经办人：">{{ form.deliverPerson }}</el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="交车地点：">{{ form.deliverAddress }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="预计交付时间：">{{ form.expectedTime }}</el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>


                    <h1 class="module-title">附件信息</h1>
                    <div class="center-grid mb-20">
                        <el-form ref="form" :model="form" size="mini">
                            <el-row>
                                <el-col :span="24">
                                    <a :href="request_host + form.attachmentAddress">{{ form.attachmentAddress }}</a>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div style="margin-left: 40%">
                        <el-button type="primary" @click="createSoData" v-if="form.status ==='0'">生成销售订单</el-button>

                        <el-button type="primary" @click="createMoData" v-if="form.soStatus ==='0'">生成生产订单</el-button>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
     <!-- 引入 Vue.js -->
     <script src="../../assets/js/vue.js"></script>
     <!-- 引入 Element UI 的 JS 文件 -->
     <script src="../../assets/js/element-ui.js"></script>
    <script type="module">
        import LxHeader from '../../pages/components/LxHeader/index.js'
        Vue.component('lx-header', LxHeader)

        checkAuthentication(2)
        new Vue({
            el: '#app',
            data() {
               return {
                    currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
                    userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
                    // 遮罩层
                    loading: true,
                   isToggle: false,

                   configOptions: [],
                    // 分页信息
                    total: 0,
                    pageNum: 1,
                    pageSize: 10,
                    form: {},
                    soCars: {},
                    optionDatas: [],
                    // 字典数据
                    // dict: dict,
                    params: {},
                    request_host: request_host,
                    number: 0,
                    dicts: ['so_status', 'so_progress'],
                    optionsObj: [],
                    tableData: [],
                    tableColumnData: [
                    {
                        fieldName: '车平台',
                        fieldApi: 'carPlatformName'
                    },
                    {
                        fieldName: '车型号',
                        fieldApi: 'carModelName'
                    },
                    {
                        fieldName: '品牌',
                        fieldApi: 'carBrand'
                    },
                    {
                        fieldName: '来源地',
                        fieldApi: 'carSourceLocation'
                    },
                    {
                        fieldName: '车内布局',
                        fieldApi: 'carLayout'
                    },
                    {
                        fieldName: '单价',
                        fieldApi: 'soPrice'
                    }
                    ],
                    tableLoading: false,
                    detailDialog: false, // 详情
                    rowDetail: {},

                }
            },
            created() {
                // 从URL获取订单ID
                this.getQueryParams()
                this.getOptions()
                if (this.params.cuoCode) {
                    this.loading = true
                    // 获取订单详情
                    axios.get(`${this.request_host}/system/uo/getUoInfo?cuoCode=` + this.params.cuoCode)
                        .then(response => {
                            this.form = response.data.data
                            this.loading = false
                        })
                }
                if (this.params.cuoCode) {
                    // 获取订单详情
                    axios.get(`${this.request_host}/system/uo/getCuoOption?cuoCode=` + this.params.cuoCode)
                        .then(response => {
                            this.configOptions = response.data.data
                        })
                }
            },
            computed: {
            },
            methods: {
                getQueryParams() {
                    const params = {};
                    const queryString = window.location.search.substring(1); // 去掉 ?
                    const pairs = queryString.split('&');
                    pairs.forEach(pair => {
                        const [key, value] = pair.split('=');
                        params[decodeURIComponent(key)] = decodeURIComponent(value);
                        });
                    this.params = params;
                },
                getOptions() {
                    this.dicts.forEach((item) => {
                        axios.get(`${this.request_host}/system/dict/data/type/${item}`).then((response) => {
                            this.$set(this.optionsObj, item, {})
                            if (response.status == 200) {
                                response.data.data.map((item1) => {
                                    this.optionsObj[item][item1.dictValue] = item1.dictLabel
                                })
                            }
                        })
                    })
                },
                getOptionsStr(opt, value) {
                    if (this.optionsObj[opt] && value) {
                        return this.optionsObj[opt][value]
                    }
                    return ''
                },
                openDetail(row) {
                    this.rowDetail = row
                    this.optionDatas = row.soOptionVo
                    this.detailDialog = true
                },
                generateExecutionOrderSubmit(row) {
                    this.$confirm(`确认生成该记录的执行订单？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 新增
                        axios.post(`${this.request_host}/system/executeOrder/createOrder`, row)
                            .then(response => {
                                if (response.data.code === 200){
                                    //window.location.reload()
                                    window.open('../executeOrder/execute_order_list.html')
                                }else {
                                    this.$message.error(response.data.msg)
                                }

                            }).catch(error => {
                            this.$message.error(`创建失败`);
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });

                },
                createSoData() {
                    this.$confirm(`确认生成该记录的销售订单？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let record = {
                            "channelOrderCode": this.form.cuoCode,
                            "soType": "1",
                        }
                        // 新增
                        axios.post(`${this.request_host}/system/order/createOrder`, record)
                            .then(response => {
                                if (response.data.code === 200){
                                    //window.location.reload()
                                    window.open('../so/so_list.html')
                                }else {
                                    this.$message.error(response.data.msg)
                                }

                            }).catch(error => {
                            this.$message.error(`创建失败`);
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                },
                createMoData() {
                    this.$confirm(`确认生成该记录的生产订单？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let record = {
                            "soCode": this.form.soCode,
                        }
                        // 新增
                        axios.post(`${this.request_host}/order/manufactureOrder`, record)
                            .then(response => {
                                if (response.data.code === 200){
                                    //window.location.reload()
                                    window.open('../manufactureOrder/manufacture_order_list.html')
                                }else {
                                    this.$message.error(response.data.msg)
                                }

                            }).catch(error => {
                            this.$message.error(`创建失败`);
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                }
            }
        })
    </script>
<style>
    .styled-table {
         width: 100%;
         border-collapse: collapse;
         font-family: Arial, sans-serif;
         margin: 20px 0;
         box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
     }

    .styled-table th,
    .styled-table td {
        padding: 12px 15px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .styled-table tr:nth-of-type(even) {
        background-color: #f2f2f2;
    }

    .styled-table tr:hover {
        background-color: #e0e0e0;
    }

    .styled-table td[colspan] {
        background-color: #4085ed;
        color: white;
        font-weight: bold;
    }

    .main-category-title {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        padding: 10px;
        background: #2625af;
    }
    .el-table__row td:first-child {
        background: blue !important; /* 设置背景色 */
        color: white;
    }
    .el-table__row td:nth-child(2) {
        background: #5f1ad3 !important;
        color: #fff;
    }
    .has-gutter tr th:first-child{
        background: blue !important; /* 设置背景色 */
        color: white;
    }
    .has-gutter tr th:nth-child(2){
        background: #5f1ad3 !important;
        color: #fff;
    }
    </style>
</body>
</html>
